<script lang="ts" setup>
import {reactive, ref} from "vue";
import {normalizeYmd} from "../../filters";
import {batchdelAccount, deleteAccount, editAccount, getAccountList} from "../../api/user";
import type {ElTable} from "element-plus";
import {ElMessage} from "element-plus"

let FormData: any = ref([])
let FormDatas = ref<InstanceType<typeof ElTable>>()
let form = reactive({
  aoccount: "",
  userGroup: ''
})
let currentPage: any = ref(1)
const pageSize = ref<number>(3)
const dialogFormVisible = ref<boolean>(false)
let totals = ref<number>(0)
let multipleSelection = ref([])
const visible = ref<boolean>(false)

async function getData() {
  let res = await getAccountList({currentPage: currentPage.value, pageSize: pageSize.value})
  let {total, data} = res.data
  totals.value = total
  if (data.length == 0 && currentPage != 1) {
    currentPage -= 1
    getData()
    return
  }
  FormData.value = data

}

function handleSelectionChange(val: any) {
  let arr: any = []
  val.forEach((item: any) => arr.push(item.id))
  multipleSelection = arr
}

function Dataecho(row: any) {
  form = {...row}
}

async function handleEdit(row: any) {
  let res = await editAccount({id: row.id, account: form.aoccount, userGroup: form.userGroup})
  let {code, msg} = res.data
  if (code == 0) getData()
}

function cancelEditing() {
  ElMessage('已取消编辑')
}

async function handleDelete(row: any) {
  let res = await deleteAccount({id: row.id})
  let {code, msg} = res.data
  if (code == 0) {
    getData()
  }
}

function handleSizeChange(val: any) {
  pageSize.value = val
  getData()
}

function handlCheCurrentange(val: any) {
  currentPage.value = val
  getData()
}

async function toggleSelection(rows: any) {
  if (rows) {
    let ids = JSON.stringify(rows)
    let res = await batchdelAccount(ids)
    let {code, msg} = res.data
    if (code == 0) {
      getData()
    } else {
      FormDatas.value!.clearSelection()
    }
  }
}

function CancelBatchDeletion() {
  ElMessage('已取消批量删除')
}

getData()
</script>
<template>
  <el-card class="box-card">
    <div class="clearfix">
      <span>账号列表</span>
    </div>
    <el-table
        ref="FormDatas"
        :data="FormData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="account" label="账号"></el-table-column>
      <el-table-column prop="userGroup" label="用户组"></el-table-column>
      <el-table-column label="创建时间">
        <template #default="scope">{{
            normalizeYmd(scope.row.ctime)
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <!-- 编辑 -->
          <el-dialog title="用户信息编辑" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="账号">
                <el-input v-model="form.account" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="用户组">
                <el-select
                    v-model="form.userGroup"
                    placeholder="请选择活动区域"
                >
                  <el-option label="超级管理员" value="超级管理员"></el-option>
                  <el-option label="普通管理员" value="普通管理员"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button
                  @click="
                  dialogFormVisible = false;
                  cancelEditing();
                "
              >取 消
              </el-button
              >
              <el-button
                  type="primary"
                  @click="
                  dialogFormVisible = false;
                  handleEdit(scope.row);
                "
              >确 定
              </el-button
              >
            </div>
          </el-dialog>
          <el-button
              size="mini"
              @click="
              dialogFormVisible = true;
              Dataecho(scope.row);
            "
          >编辑
          </el-button
          >
          <!-- 删除 -->
          <!-- cancel取消事件  confirm确定事件-->
          <el-popconfirm
              title="是否确定删除？"
              @cancel="CancelDeletion"
              @confirm="handleDelete(scope.row)"
          >
            <el-button slot="reference" size="mini" type="danger"
            >删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handlCheCurrentange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totals"
    >
    </el-pagination>
    <el-popover placement="top" width="160" v-model="visible">
      <p>您确定要批量删除吗？</p>
      <div style="text-align: right; margin: 0">
        <el-button
            size="mini"
            type="text"
            @click="
            visible = false;
            CancelBatchDeletion();">
          取消
        </el-button>
        <el-button
            type="primary"
            size="mini"
            @click="
            visible = false;
            toggleSelection(multipleSelection);
          ">
          确定
        </el-button>
      </div>
      <el-button
          type="danger"
          size="mini"
          slot="reference"
          @click="visible = false">
        批量删除
      </el-button>
    </el-popover>
    <el-button type="primary" size="mini" @click="toggleSelection()">
      取消选中
    </el-button>
  </el-card>
</template>
<style scoped lang="scss"></style>